UI ഓവർലേകളിൽ പ്രാവീണ്യം നേടാം: റിയാക്ടിന്റെ `createPortal` ഫംഗ്ഷനെക്കുറിച്ച് ഒരു ആഴത്തിലുള്ള പഠനം

ആധുനിക വെബ് ഡെവലപ്‌മെന്റിൽ, തടസ്സങ്ങളില്ലാത്തതും അവബോധജന്യവുമായ യൂസർ ഇന്റർഫേസുകൾ നിർമ്മിക്കുന്നത് വളരെ പ്രധാനമാണ്. പലപ്പോഴും, ഇതിനായി പാരന്റ് കമ്പോണന്റിന്റെ DOM ഹയറാർക്കിയിൽ നിന്ന് പുറത്തുകടക്കേണ്ട എലമെന്റുകൾ പ്രദർശിപ്പിക്കേണ്ടി വരും. മോഡൽ ഡയലോഗുകൾ, നോട്ടിഫിക്കേഷൻ ബാനറുകൾ, ടൂൾട്ടിപ്പുകൾ, അല്ലെങ്കിൽ സങ്കീർണ്ണമായ കോൺടെക്സ്റ്റ് മെനുകൾ എന്നിവയെക്കുറിച്ച് ചിന്തിക്കുക. ഈ UI ഘടകങ്ങൾക്ക് CSS z-index സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റുകളിൽ നിന്ന് യാതൊരു തടസ്സവുമില്ലാതെ മറ്റ് ഉള്ളടക്കങ്ങൾക്ക് മുകളിൽ ശരിയായി റെൻഡർ ചെയ്യപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കാൻ പ്രത്യേക കൈകാര്യം ചെയ്യൽ ആവശ്യമാണ്.

റിയാക്ട്, അതിന്റെ നിരന്തരമായ പരിണാമത്തിലൂടെ, ഈ വെല്ലുവിളിക്ക് ശക്തമായ ഒരു പരിഹാരം നൽകുന്നു: createPortal ഫംഗ്ഷൻ. react-dom വഴി ലഭ്യമായ ഈ ഫീച്ചർ, സാധാരണ റിയാക്ട് കമ്പോണന്റ് ഹയറാർക്കിക്ക് പുറത്തുള്ള ഒരു DOM നോഡിലേക്ക് ചൈൽഡ് കമ്പോണന്റുകളെ റെൻഡർ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഈ ബ്ലോഗ് പോസ്റ്റ്, createPortal-നെക്കുറിച്ചുള്ള സമഗ്രമായ ഒരു ഗൈഡായി വർത്തിക്കും, അതിന്റെ പ്രധാന ആശയങ്ങൾ, പ്രായോഗിക ഉപയോഗങ്ങൾ, ആഗോള ഡെവലപ്‌മെന്റ് പ്രേക്ഷകർക്കായുള്ള മികച്ച രീതികൾ എന്നിവ പര്യവേക്ഷണം ചെയ്യും.

എന്താണ് `createPortal`, എന്തിന് ഇത് ഉപയോഗിക്കണം?

അടിസ്ഥാനപരമായി, React.createPortal(child, container) എന്നത് ഒരു റിയാക്ട് കമ്പോണന്റിനെ (child) അതിന്റെ പാരന്റ് കമ്പോണന്റിൽ നിന്ന് വ്യത്യസ്തമായ ഒരു DOM നോഡിലേക്ക് (container) റെൻഡർ ചെയ്യുന്ന ഒരു ഫംഗ്ഷനാണ്.

നമുക്ക് ഇതിലെ പാരാമീറ്ററുകൾ പരിശോധിക്കാം:

• child: ഇത് നിങ്ങൾ റെൻഡർ ചെയ്യാൻ ആഗ്രഹിക്കുന്ന റിയാക്ട് എലമെന്റ്, സ്ട്രിംഗ്, അല്ലെങ്കിൽ ഫ്രാഗ്മെന്റ് ആണ്. സാധാരണയായി ഒരു കമ്പോണന്റിന്റെ render മെത്തേഡിൽ നിന്ന് നിങ്ങൾ തിരികെ നൽകുന്നതെന്തോ അതാണ് ഇത്.
• container: ഇത് നിങ്ങളുടെ ഡോക്യുമെന്റിൽ നിലവിലുള്ള ഒരു DOM എലമെന്റാണ്. child എലമെന്റ് കൂട്ടിച്ചേർക്കപ്പെടുന്ന ലക്ഷ്യസ്ഥാനമാണിത്.

പ്രശ്നം: DOM ഹയറാർക്കിയും CSS സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റുകളും

ഒരു സാധാരണ സാഹചര്യം പരിഗണിക്കുക: ഒരു മോഡൽ ഡയലോഗ്. മോഡലുകൾ സാധാരണയായി പേജിലെ മറ്റെല്ലാ ഉള്ളടക്കങ്ങൾക്കും മുകളിൽ പ്രദർശിപ്പിക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്. നിയന്ത്രിതമായ overflow: hidden സ്റ്റൈലോ അല്ലെങ്കിൽ ഒരു പ്രത്യേക z-index മൂല്യമോ ഉള്ള മറ്റൊരു കമ്പോണന്റിനുള്ളിൽ നിങ്ങൾ ഒരു മോഡൽ കമ്പോണന്റ് നേരിട്ട് റെൻഡർ ചെയ്യുകയാണെങ്കിൽ, മോഡൽ ക്ലിപ്പ് ചെയ്യപ്പെടുകയോ തെറ്റായി ലേയർ ചെയ്യപ്പെടുകയോ ചെയ്യാം. ഇത് DOM-ന്റെ ഹയറാർക്കിയൽ സ്വഭാവവും CSS-ന്റെ z-index സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റ് നിയമങ്ങളും കാരണമാണ്.

ഒരു എലമെന്റിലെ z-index മൂല്യം ഒരേ സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റിലുള്ള അതിന്റെ സഹോദരങ്ങളുമായുള്ള സ്റ്റാക്കിംഗ് ഓർഡറിനെ മാത്രമേ ബാധിക്കുകയുള്ളൂ. ഒരു പൂർവ്വിക എലമെന്റ് ഒരു പുതിയ സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റ് സ്ഥാപിക്കുകയാണെങ്കിൽ (ഉദാഹരണത്തിന്, static അല്ലാത്ത ഒരു position-ഉം ഒരു z-index-ഉം ഉള്ളതുകൊണ്ട്), ആ പൂർവ്വികന്റെ ഉള്ളിൽ റെൻഡർ ചെയ്യുന്ന ചിൽഡ്രൻ ആ കോൺടെക്സ്റ്റിൽ ഒതുങ്ങിപ്പോകും. ഇത് നിങ്ങൾ ഉദ്ദേശിച്ച ഓവർലേ മറ്റ് എലമെന്റുകൾക്ക് താഴെയായിപ്പോകുന്ന നിരാശാജനകമായ ലേയൗട്ട് പ്രശ്നങ്ങളിലേക്ക് നയിച്ചേക്കാം.

പരിഹാരം: `createPortal` സഹായത്തിനെത്തുന്നു

createPortal, റിയാക്ട് ട്രീയിലെ കമ്പോണന്റിന്റെ സ്ഥാനവും DOM ട്രീയിലെ അതിന്റെ സ്ഥാനവും തമ്മിലുള്ള വിഷ്വൽ ബന്ധം വിച്ഛേദിച്ച് ഈ പ്രശ്നം മനോഹരമായി പരിഹരിക്കുന്നു. നിങ്ങൾക്ക് ഒരു കമ്പോണന്റ് ഒരു പോർട്ടലിനുള്ളിൽ റെൻഡർ ചെയ്യാൻ കഴിയും, അത് നേരിട്ട് body-യുടെ ഒരു സഹോദരനോ അല്ലെങ്കിൽ ചൈൽഡോ ആയ ഒരു DOM നോഡിലേക്ക് കൂട്ടിച്ചേർക്കപ്പെടും, അതുവഴി പ്രശ്‌നകരമായ പൂർവ്വിക സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റുകളെ ഫലപ്രദമായി മറികടക്കാൻ സാധിക്കും.

പോർട്ടൽ അതിന്റെ ചൈൽഡിനെ മറ്റൊരു DOM നോഡിലേക്ക് റെൻഡർ ചെയ്യുന്നുണ്ടെങ്കിലും, അത് ഇപ്പോഴും നിങ്ങളുടെ റിയാക്ട് ട്രീയിൽ ഒരു സാധാരണ റിയാക്ട് കമ്പോണന്റ് പോലെ പ്രവർത്തിക്കുന്നു. ഇതിനർത്ഥം ഇവന്റ് പ്രൊപ്പഗേഷൻ പ്രതീക്ഷിച്ചതുപോലെ പ്രവർത്തിക്കുന്നു: ഒരു പോർട്ടൽ റെൻഡർ ചെയ്ത കമ്പോണന്റിൽ ഒരു ഇവന്റ് ഹാൻഡ്‌ലർ ഘടിപ്പിച്ചിട്ടുണ്ടെങ്കിൽ, ഇവന്റ് DOM ഹയറാർക്കിയിലൂടെ മാത്രമല്ല, റിയാക്ട് കമ്പോണന്റ് ഹയറാർക്കിയിലൂടെയും മുകളിലേക്ക് പോകും.

`createPortal`-ന്റെ പ്രധാന ഉപയോഗങ്ങൾ

createPortal-ന്റെ വൈവിധ്യം അതിനെ വിവിധ UI പാറ്റേണുകൾക്ക് ഒഴിച്ചുകൂടാനാവാത്ത ഒരു ഉപകരണമാക്കി മാറ്റുന്നു:

1. മോഡൽ വിൻഡോകളും ഡയലോഗുകളും

ഒരുപക്ഷേ ഇതാണ് ഏറ്റവും സാധാരണവും ആകർഷകവുമായ ഉപയോഗം. മോഡലുകൾ ഉപയോക്താവിന്റെ പ്രവർത്തനങ്ങളെ തടസ്സപ്പെടുത്താനും ശ്രദ്ധ ആകർഷിക്കാനും രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതാണ്. അവയെ നേരിട്ട് ഒരു കമ്പോണന്റിനുള്ളിൽ റെൻഡർ ചെയ്യുന്നത് സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റ് പ്രശ്നങ്ങളിലേക്ക് നയിച്ചേക്കാം.

ഉദാഹരണ സാഹചര്യം: ഒരു ഇ-കൊമേഴ്‌സ് ആപ്ലിക്കേഷനിൽ ഉപയോക്താക്കൾക്ക് ഒരു ഓർഡർ സ്ഥിരീകരിക്കേണ്ടതുണ്ടെന്ന് കരുതുക. സ്ഥിരീകരണ മോഡൽ പേജിലെ മറ്റെല്ലാത്തിനും മുകളിൽ ദൃശ്യമാകണം.

നടപ്പിലാക്കാനുള്ള ആശയം:

1. നിങ്ങളുടെ public/index.html ഫയലിൽ ഒരു പ്രത്യേക DOM എലമെന്റ് ഉണ്ടാക്കുക (അല്ലെങ്കിൽ ഡൈനാമിക് ആയി ഒന്ന് സൃഷ്ടിക്കുക). സാധാരണയായി <div id="modal-root"></div> എന്നൊന്ന് ഉണ്ടാക്കി <body> ടാഗിന്റെ അവസാനത്തിൽ സ്ഥാപിക്കുന്നതാണ് ഒരു രീതി.
2. നിങ്ങളുടെ റിയാക്ട് ആപ്ലിക്കേഷനിൽ, ഈ DOM നോഡിന്റെ ഒരു റഫറൻസ് നേടുക.
3. നിങ്ങളുടെ മോഡൽ കമ്പോണന്റ് ട്രിഗർ ചെയ്യുമ്പോൾ, ReactDOM.createPortal ഉപയോഗിച്ച് മോഡലിന്റെ ഉള്ളടക്കം modal-root DOM നോഡിലേക്ക് റെൻഡർ ചെയ്യുക.

കോഡ് സ്നിപ്പറ്റ് (ആശയം):

            // App.js
import React from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  return (
    

      
Welcome to Our Global Store!
       setIsModalOpen(true)}>Show Confirmation
      {isModalOpen && (
         setIsModalOpen(false)}>
          
Confirm Your Purchase
          
Are you sure you want to proceed?
        
      )}
    
  );
}

export default App;

// Modal.js
import React from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

function Modal({ children, onClose }) {
  // Create a DOM element for the modal content to live in
  const element = document.createElement('div');

  React.useEffect(() => {
    // Append the element to the modal root when the component mounts
    modalRoot.appendChild(element);
    // Clean up by removing the element when the component unmounts
    return () => {
      modalRoot.removeChild(element);
    };
  }, [element]);

  return ReactDOM.createPortal(
    

      

        {children}
        Close
      
    
,
    element // Render into the element we created
  );
}

export default Modal;

            

              
                Copy
              
            
          

ഈ സമീപനം മോഡൽ modal-root-ന്റെ നേരിട്ടുള്ള ഒരു ചൈൽഡ് ആണെന്ന് ഉറപ്പാക്കുന്നു, ഇത് സാധാരണയായി body-ലേക്ക് കൂട്ടിച്ചേർക്കപ്പെടുന്നു, അങ്ങനെ ഇടയിലുള്ള സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റുകളെ മറികടക്കുന്നു.

2. ടൂൾട്ടിപ്പുകളും പോപ്പ്ഓവറുകളും

ഒരു ഉപയോക്താവ് മറ്റൊരു എലമെന്റുമായി സംവദിക്കുമ്പോൾ (ഉദാഹരണത്തിന്, ഒരു ബട്ടണിൽ ഹോവർ ചെയ്യുകയോ ഒരു ഐക്കണിൽ ക്ലിക്ക് ചെയ്യുകയോ ചെയ്യുമ്പോൾ) ദൃശ്യമാകുന്ന ചെറിയ UI എലമെന്റുകളാണ് ടൂൾട്ടിപ്പുകളും പോപ്പ്ഓവറുകളും. അവയും മറ്റ് ഉള്ളടക്കങ്ങൾക്ക് മുകളിൽ ദൃശ്യമാകേണ്ടതുണ്ട്, പ്രത്യേകിച്ചും ട്രിഗർ ചെയ്യുന്ന എലമെന്റ് സങ്കീർണ്ണമായ ഒരു ലേയൗട്ടിൽ ആഴത്തിൽ നെസ്റ്റ് ചെയ്തിട്ടുണ്ടെങ്കിൽ.

ഉദാഹരണ സാഹചര്യം: ഒരു അന്താരാഷ്ട്ര സഹകരണ പ്ലാറ്റ്‌ഫോമിൽ, ഒരു ഉപയോക്താവ് ഒരു ടീം അംഗത്തിന്റെ അവതാറിൽ ഹോവർ ചെയ്യുമ്പോൾ അവരുടെ കോൺടാക്റ്റ് വിവരങ്ങളും ലഭ്യതയും കാണുന്നു. അവതാറിന്റെ പാരന്റ് കണ്ടെയ്‌നറിന്റെ സ്റ്റൈലിംഗ് പരിഗണിക്കാതെ തന്നെ ടൂൾട്ടിപ്പ് ദൃശ്യമാകണം.

നടപ്പിലാക്കാനുള്ള ആശയം: മോഡലുകൾക്ക് സമാനമായി, ടൂൾട്ടിപ്പുകൾ റെൻഡർ ചെയ്യുന്നതിന് നിങ്ങൾക്ക് ഒരു പോർട്ടൽ ഉണ്ടാക്കാം. ഒരു പൊതുവായ പോർട്ടൽ റൂട്ടിലേക്ക് ടൂൾട്ടിപ്പ് ഘടിപ്പിക്കുക, അല്ലെങ്കിൽ നിങ്ങൾക്ക് ഒരു പ്രത്യേക പോർട്ടൽ കണ്ടെയ്‌നർ ഇല്ലെങ്കിൽ നേരിട്ട് body-യിലേക്ക് ഘടിപ്പിക്കുക എന്നത് ഒരു സാധാരണ രീതിയാണ്.

കോഡ് സ്നിപ്പറ്റ് (ആശയം):

            // Tooltip.js
import React from 'react';
import ReactDOM from 'react-dom';

function Tooltip({ children, targetElement }) {
  if (!targetElement) return null;

  // Render the tooltip content directly into the body
  return ReactDOM.createPortal(
    

      {children}
    
,
    document.body
  );
}

// Parent Component that triggers the tooltip
function InfoButton({ info }) {
  const [targetRef, setTargetRef] = React.useState(null);
  const [showTooltip, setShowTooltip] = React.useState(false);

  return (
    
 setShowTooltip(true)}
      onMouseLeave={() => setShowTooltip(false)}
      style={{ position: 'relative', display: 'inline-block' }}
    >
      ? {/* Information icon */}
      {showTooltip && {info}}
    
  );
}

            

              
                Copy
              
            
          

3. ഡ്രോപ്പ്ഡൗൺ മെനുകളും സെലക്ട് ബോക്സുകളും

കസ്റ്റം ഡ്രോപ്പ്ഡൗൺ മെനുകൾക്കും സെലക്ട് ബോക്സുകൾക്കും പോർട്ടലുകൾ പ്രയോജനകരമാണ്. ഒരു ഡ്രോപ്പ്ഡൗൺ തുറക്കുമ്പോൾ, അത് പലപ്പോഴും അതിന്റെ പാരന്റ് കണ്ടെയ്‌നറിന്റെ അതിരുകൾക്കപ്പുറത്തേക്ക് വ്യാപിക്കേണ്ടതുണ്ട്, പ്രത്യേകിച്ചും ആ കണ്ടെയ്‌നറിന് overflow: hidden പോലുള്ള പ്രോപ്പർട്ടികൾ ഉണ്ടെങ്കിൽ.

ഉദാഹരണ സാഹചര്യം: ഒരു മൾട്ടിനാഷണൽ കമ്പനിയുടെ ഇന്റേണൽ ഡാഷ്‌ബോർഡിൽ ഒരു നീണ്ട ലിസ്റ്റിൽ നിന്ന് ഒരു പ്രോജക്റ്റ് തിരഞ്ഞെടുക്കുന്നതിന് ഒരു കസ്റ്റം സെലക്ട് ഡ്രോപ്പ്ഡൗൺ ഉണ്ട്. ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് അത് സ്ഥിതിചെയ്യുന്ന ഡാഷ്‌ബോർഡ് വിജറ്റിന്റെ വീതിയിലോ ഉയരത്തിലോ ഒതുങ്ങരുത്.

നടപ്പിലാക്കാനുള്ള ആശയം: ഡ്രോപ്പ്ഡൗൺ ഓപ്ഷനുകൾ body-യിലേക്കോ അല്ലെങ്കിൽ ഒരു പ്രത്യേക പോർട്ടൽ റൂട്ടിലേക്കോ ഘടിപ്പിച്ച ഒരു പോർട്ടലിലേക്ക് റെൻഡർ ചെയ്യുക.

4. നോട്ടിഫിക്കേഷൻ സിസ്റ്റങ്ങൾ

ഗ്ലോബൽ നോട്ടിഫിക്കേഷൻ സിസ്റ്റങ്ങളും (ടോസ്റ്റ് സന്ദേശങ്ങൾ, അലേർട്ടുകൾ) createPortal-ന് അനുയോജ്യമായ മറ്റൊരു ഉദാഹരണമാണ്. ഈ സന്ദേശങ്ങൾ സാധാരണയായി ഒരു നിശ്ചിത സ്ഥാനത്ത് ദൃശ്യമാകുന്നു, പലപ്പോഴും വ്യൂപോർട്ടിന്റെ മുകളിലോ താഴെയോ, നിലവിലെ സ്ക്രോൾ പൊസിഷനോ പാരന്റ് കമ്പോണന്റിന്റെ ലേയൗട്ടോ പരിഗണിക്കാതെ.

ഉദാഹരണ സാഹചര്യം: ഒരു ട്രാവൽ ബുക്കിംഗ് സൈറ്റ് വിജയകരമായ ബുക്കിംഗുകൾക്കുള്ള സ്ഥിരീകരണ സന്ദേശങ്ങളോ പരാജയപ്പെട്ട പേയ്‌മെന്റുകൾക്കുള്ള പിശക് സന്ദേശങ്ങളോ പ്രദർശിപ്പിക്കുന്നു. ഈ അറിയിപ്പുകൾ ഉപയോക്താവിന്റെ സ്ക്രീനിൽ സ്ഥിരമായി ദൃശ്യമാകണം.

നടപ്പിലാക്കാനുള്ള ആശയം: createPortal ഉപയോഗിച്ച് ഒരു പ്രത്യേക നോട്ടിഫിക്കേഷൻ കണ്ടെയ്‌നർ (ഉദാഹരണത്തിന്, <div id="notifications-root"></div>) ഉപയോഗിക്കാം.

റിയാക്ടിൽ `createPortal` എങ്ങനെ നടപ്പിലാക്കാം

createPortal നടപ്പിലാക്കുന്നതിൽ കുറച്ച് പ്രധാന ഘട്ടങ്ങൾ ഉൾപ്പെടുന്നു:

ഘട്ടം 1: ഒരു ടാർഗെറ്റ് DOM നോഡ് കണ്ടെത്തുകയോ സൃഷ്ടിക്കുകയോ ചെയ്യുക

നിങ്ങളുടെ പോർട്ടൽ ഉള്ളടക്കത്തിനായുള്ള കണ്ടെയ്‌നറായി പ്രവർത്തിക്കാൻ സാധാരണ റിയാക്ട് റൂട്ടിന് പുറത്ത് ഒരു DOM എലമെന്റ് ആവശ്യമാണ്. നിങ്ങളുടെ പ്രധാന HTML ഫയലിൽ (ഉദാഹരണത്തിന്, public/index.html) ഇത് നിർവചിക്കുന്നതാണ് ഏറ്റവും സാധാരണമായ രീതി.

            <!-- public/index.html -->
<body>
  <noscript>You need JavaScript enabled to run this app.</noscript>
  <div id="root"></div>
  <div id="modal-root"></div>      <!-- For modals -->
  <div id="tooltip-root"></div>     <!-- Optionally for tooltips -->
</body>

            

              
                Copy
              
            
          

പകരമായി, മുകളിലുള്ള മോഡൽ ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ, ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ലൈഫ് സൈക്കിളിനുള്ളിൽ നിങ്ങൾക്ക് ഡൈനാമിക് ആയി ഒരു DOM എലമെന്റ് ഉണ്ടാക്കാനും തുടർന്ന് അത് DOM-ലേക്ക് കൂട്ടിച്ചേർക്കാനും കഴിയും. എന്നിരുന്നാലും, സ്ഥിരമായ പോർട്ടൽ റൂട്ടുകൾക്ക് HTML-ൽ മുൻകൂട്ടി നിർവചിക്കുന്നത് സാധാരണയായി കൂടുതൽ വൃത്തിയുള്ളതാണ്.

ഘട്ടം 2: ടാർഗെറ്റ് DOM നോഡിന്റെ ഒരു റഫറൻസ് നേടുക

നിങ്ങളുടെ റിയാക്ട് കമ്പോണന്റിൽ, നിങ്ങൾ ഈ DOM നോഡ് ആക്സസ് ചെയ്യേണ്ടതുണ്ട്. document.getElementById() അല്ലെങ്കിൽ document.querySelector() ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇത് ചെയ്യാൻ കഴിയും.

            // Somewhere in your component or utility file
const modalRootElement = document.getElementById('modal-root');
const tooltipRootElement = document.getElementById('tooltip-root');

// It's crucial to ensure these elements exist before attempting to use them.
// You might want to add checks or handle cases where they are not found.

            

              
                Copy
              
            
          

ഘട്ടം 3: `ReactDOM.createPortal` ഉപയോഗിക്കുക

ReactDOM ഇമ്പോർട്ട് ചെയ്യുക, തുടർന്ന് createPortal ഫംഗ്ഷൻ ഉപയോഗിക്കുക, നിങ്ങളുടെ കമ്പോണന്റിന്റെ JSX ആദ്യത്തെ ആർഗ്യുമെന്റായും ടാർഗെറ്റ് DOM നോഡ് രണ്ടാമത്തെ ആർഗ്യുമെന്റായും നൽകുക.

ഉദാഹരണം: ഒരു പോർട്ടലിൽ ലളിതമായ ഒരു സന്ദേശം റെൻഡർ ചെയ്യുന്നു

            // MessagePortal.js
import React from 'react';
import ReactDOM from 'react-dom';

function MessagePortal({ message }) {
  const portalContainer = document.getElementById('modal-root'); // Assuming you're using modal-root for this example

  if (!portalContainer) {
    console.error('Portal container "modal-root" not found!');
    return null;
  }

  return ReactDOM.createPortal(
    <div style={{ position: 'fixed', bottom: '20px', left: '50%', transform: 'translateX(-50%)', backgroundColor: 'rgba(0,0,0,0.7)', color: 'white', padding: '10px', borderRadius: '5px' }}>
      {message}
    </div>,
    portalContainer
  );
}

export default MessagePortal;

// In another component...
function Dashboard() {
  return (
    <div>
      <h1>Dashboard Overview</h1>
      <MessagePortal message="Data successfully synced!" />
    </div>
  );
}

            

              
                Copy
              
            
          

പോർട്ടലുകൾ ഉപയോഗിച്ച് സ്റ്റേറ്റും ഇവന്റുകളും കൈകാര്യം ചെയ്യൽ

createPortal-ന്റെ ഏറ്റവും പ്രധാനപ്പെട്ട ഗുണങ്ങളിലൊന്ന് അത് റിയാക്ടിന്റെ ഇവന്റ് ഹാൻഡ്‌ലിംഗ് സിസ്റ്റത്തെ തകർക്കുന്നില്ല എന്നതാണ്. ഒരു പോർട്ടലിനുള്ളിൽ റെൻഡർ ചെയ്ത എലമെന്റുകളിൽ നിന്നുള്ള ഇവന്റുകൾ DOM ട്രീയിലൂടെ മാത്രമല്ല, റിയാക്ട് കമ്പോണന്റ് ട്രീയിലൂടെയും മുകളിലേക്ക് പോകും.

ഉദാഹരണ സാഹചര്യം: ഒരു മോഡൽ ഡയലോഗിൽ ഒരു ഫോം അടങ്ങിയിരിക്കാം. ഒരു ഉപയോക്താവ് മോഡലിനുള്ളിലെ ഒരു ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ, ക്ലിക്ക് ഇവന്റ് മോഡലിന്റെ ദൃശ്യപരത നിയന്ത്രിക്കുന്ന പാരന്റ് കമ്പോണന്റിലെ ഒരു ഇവന്റ് ലിസണർ കൈകാര്യം ചെയ്യണം, അല്ലാതെ മോഡലിന്റെ DOM ഹയറാർക്കിയിൽ കുടുങ്ങിപ്പോകരുത്.

വിശദീകരണ ഉദാഹരണം:

            // ModalWithEventHandling.js
import React from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

function ModalWithEventHandling({ children, onClose }) {
  const modalContentRef = React.useRef(null);

  // Using useEffect to create and clean up the DOM element
  const [wrapperElement] = React.useState(() => document.createElement('div'));

  React.useEffect(() => {
    modalRoot.appendChild(wrapperElement);
    return () => {
      modalRoot.removeChild(wrapperElement);
    };
  }, [wrapperElement]);

  // Handle clicks outside the modal content to close it
  const handleOutsideClick = (event) => {
    if (modalContentRef.current && !modalContentRef.current.contains(event.target)) {
      onClose();
    }
  };

  return ReactDOM.createPortal(
    

      

        {children}
        Close Modal
      
    
,
    wrapperElement
  );
}

// App.js (using the modal)
function App() {
  const [showModal, setShowModal] = React.useState(false);

  return (
    

      
App Content
       setShowModal(true)}>Open Modal
      {showModal && (
         setShowModal(false)}>
          
Important Information
          
This is content inside the modal.
           alert('Button inside modal clicked!')}>
            Action Button
          
        
      )}
    
  );
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, Close Modal ബട്ടണിൽ ക്ലിക്കുചെയ്യുന്നത് പാരന്റ് App കമ്പോണന്റിൽ നിന്ന് പാസ് ചെയ്ത onClose പ്രോപ്പിനെ ശരിയായി വിളിക്കുന്നു. അതുപോലെ, modal-backdrop-ലെ ക്ലിക്കുകൾക്കായി നിങ്ങൾക്ക് ഒരു ഇവന്റ് ലിസണർ ഉണ്ടായിരുന്നെങ്കിൽ, മോഡൽ ഒരു പ്രത്യേക DOM സബ്ട്രീയിലേക്ക് റെൻഡർ ചെയ്തിട്ടുണ്ടെങ്കിലും, അത് handleOutsideClick ഫംഗ്ഷനെ ശരിയായി ട്രിഗർ ചെയ്യും.

വിപുലമായ പാറ്റേണുകളും പരിഗണനകളും

ഡൈനാമിക് പോർട്ടലുകൾ

നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ആവശ്യങ്ങൾക്കനുസരിച്ച് നിങ്ങൾക്ക് ഡൈനാമിക് ആയി പോർട്ടൽ കണ്ടെയ്‌നറുകൾ ഉണ്ടാക്കാനും നീക്കം ചെയ്യാനും കഴിയും, എന്നിരുന്നാലും സ്ഥിരവും മുൻകൂട്ടി നിർവചിച്ചതുമായ പോർട്ടൽ റൂട്ടുകൾ പരിപാലിക്കുന്നത് പലപ്പോഴും ലളിതമാണ്.

പോർട്ടലുകളും സെർവർ-സൈഡ് റെൻഡറിംഗും (SSR)

സെർവർ-സൈഡ് റെൻഡറിംഗുമായി (SSR) പ്രവർത്തിക്കുമ്പോൾ, പോർട്ടലുകൾ പ്രാരംഭ HTML-മായി എങ്ങനെ സംവദിക്കുന്നു എന്നതിനെക്കുറിച്ച് നിങ്ങൾ ശ്രദ്ധാലുവായിരിക്കണം. സെർവറിൽ നിലവിലില്ലാത്ത DOM നോഡുകളിലേക്ക് പോർട്ടലുകൾ റെൻഡർ ചെയ്യുന്നതിനാൽ, നിങ്ങൾ പലപ്പോഴും പോർട്ടൽ ഉള്ളടക്കം സോപാധികമായി റെൻഡർ ചെയ്യുകയോ അല്ലെങ്കിൽ ടാർഗെറ്റ് DOM നോഡുകൾ SSR ഔട്ട്പുട്ടിൽ ഉണ്ടെന്ന് ഉറപ്പാക്കുകയോ ചെയ്യേണ്ടതുണ്ട്.

DOM മാനിപ്പുലേഷൻ ക്ലയന്റിൽ മാത്രം നടക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ useIsomorphicLayoutEffect പോലുള്ള ഒരു ഹുക്ക് (അല്ലെങ്കിൽ ക്ലയന്റിൽ useLayoutEffect-ന് മുൻഗണന നൽകുകയും സെർവറിൽ useEffect-ലേക്ക് മാറുകയും ചെയ്യുന്ന ഒരു കസ്റ്റം ഹുക്ക്) ഉപയോഗിക്കുന്നത് ഒരു സാധാരണ രീതിയാണ്.

            // usePortal.js (a common utility hook pattern)
import React, { useRef, useEffect } from 'react';

function usePortal(id) {
  const modalRootRef = useRef(null);

  useEffect(() => {
    let currentModalRoot = document.getElementById(id);
    if (!currentModalRoot) {
      currentModalRoot = document.createElement('div');
      currentModalRoot.setAttribute('id', id);
      document.body.appendChild(currentModalRoot);
    }
    modalRootRef.current = currentModalRoot;

    // Cleanup function to remove the created element if it was created by this hook
    return () => {
      // Be cautious with cleanup; only remove if it was actually created here
      // A more robust approach might involve tracking element creation.
    };
  }, [id]);

  return modalRootRef.current;
}

export default usePortal;

// Modal.js (using the hook)
import React from 'react';
import ReactDOM from 'react-dom';
import usePortal from './usePortal';

function Modal({ children, onClose }) {
  const portalTarget = usePortal('modal-root'); // Use our hook

  if (!portalTarget) return null;

  return ReactDOM.createPortal(
    

      
 e.stopPropagation()}> {/* Prevent closing by clicking inside */}
        {children}
      
    
,
    portalTarget
  );
}

            

              
                Copy
              
            
          

SSR-നായി, നിങ്ങൾ സാധാരണയായി modal-root div നിങ്ങളുടെ സെർവർ-റെൻഡർ ചെയ്ത HTML-ൽ ഉണ്ടെന്ന് ഉറപ്പാക്കും. തുടർന്ന് ക്ലയന്റിലെ റിയാക്ട് ആപ്ലിക്കേഷൻ അതിലേക്ക് അറ്റാച്ചുചെയ്യും.

പോർട്ടലുകൾ സ്റ്റൈൽ ചെയ്യൽ

ഒരു പോർട്ടലിനുള്ളിലെ എലമെന്റുകൾ സ്റ്റൈൽ ചെയ്യുന്നതിന് ശ്രദ്ധാപൂർവ്വമായ പരിഗണന ആവശ്യമാണ്. അവ പലപ്പോഴും നേരിട്ടുള്ള പാരന്റിന്റെ സ്റ്റൈലിംഗ് കോൺടെക്സ്റ്റിന് പുറത്തായതുകൊണ്ട്, നിങ്ങൾക്ക് ഗ്ലോബൽ സ്റ്റൈലുകൾ പ്രയോഗിക്കാം അല്ലെങ്കിൽ പോർട്ടൽ ഉള്ളടക്കത്തിന്റെ രൂപം ഫലപ്രദമായി കൈകാര്യം ചെയ്യാൻ CSS മൊഡ്യൂളുകൾ/സ്റ്റൈൽഡ്-കമ്പോണന്റുകൾ ഉപയോഗിക്കാം.

മോഡലുകൾ പോലുള്ള ഓവർലേകൾക്കായി, നിങ്ങൾക്ക് പലപ്പോഴും ആവശ്യമായ സ്റ്റൈലുകൾ ഇവയാണ്:

• എലമെന്റിനെ വ്യൂപോർട്ടിലേക്ക് ഫിക്സ് ചെയ്യുക (position: fixed).
• മുഴുവൻ വ്യൂപോർട്ടും വ്യാപിക്കുക (top: 0; left: 0; width: 100%; height: 100%;).
• എല്ലാറ്റിനും മുകളിൽ ദൃശ്യമാകുന്നുവെന്ന് ഉറപ്പാക്കാൻ ഉയർന്ന z-index മൂല്യം ഉപയോഗിക്കുക.
• ബാക്ക്‌ഡ്രോപ്പിനായി അർദ്ധസുതാര്യമായ ഒരു പശ്ചാത്തലം ഉൾപ്പെടുത്തുക.

പ്രവേശനക്ഷമത (Accessibility)

മോഡലുകളോ മറ്റ് ഓവർലേകളോ നടപ്പിലാക്കുമ്പോൾ, പ്രവേശനക്ഷമത നിർണായകമാണ്. നിങ്ങൾ ഫോക്കസ് ശരിയായി കൈകാര്യം ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുക:

• ഒരു മോഡൽ തുറക്കുമ്പോൾ, ഫോക്കസ് മോഡലിനുള്ളിൽ ഒതുക്കുക. ഉപയോക്താക്കൾക്ക് അതിന് പുറത്ത് ടാബ് ചെയ്യാൻ കഴിയരുത്.
• മോഡൽ അടയ്ക്കുമ്പോൾ, അത് ട്രിഗർ ചെയ്ത എലമെന്റിലേക്ക് ഫോക്കസ് തിരികെ നൽകുക.
• സഹായക സാങ്കേതികവിദ്യകളെ മോഡലിന്റെ സ്വഭാവത്തെക്കുറിച്ച് അറിയിക്കാൻ ARIA ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുക (ഉദാഹരണത്തിന്, role="dialog", aria-modal="true", aria-labelledby, aria-describedby).

Reach UI അല്ലെങ്കിൽ Material-UI പോലുള്ള ലൈബ്രറികൾ പലപ്പോഴും ഈ ആശങ്കകൾ നിങ്ങൾക്കായി കൈകാര്യം ചെയ്യുന്ന പ്രവേശനക്ഷമമായ മോഡൽ കമ്പോണന്റുകൾ നൽകുന്നു.

സാധ്യമായ അപകടങ്ങളും അവ എങ്ങനെ ഒഴിവാക്കാം

ടാർഗെറ്റ് DOM നോഡ് മറന്നുപോകുന്നത്

നിങ്ങളുടെ HTML-ൽ ടാർഗെറ്റ് DOM നോഡ് ഉണ്ടാക്കാൻ മറന്നുപോകുകയോ അല്ലെങ്കിൽ നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റിൽ അത് ശരിയായി റഫറൻസ് ചെയ്യാതിരിക്കുകയോ ചെയ്യുന്നതാണ് ഏറ്റവും സാധാരണമായ തെറ്റ്. അതിലേക്ക് റെൻഡർ ചെയ്യാൻ ശ്രമിക്കുന്നതിന് മുമ്പ് നിങ്ങളുടെ പോർട്ടൽ കണ്ടെയ്‌നർ നിലവിലുണ്ടെന്ന് എല്ലായ്പ്പോഴും ഉറപ്പാക്കുക.

ഇവന്റ് ബബ്ലിംഗ് vs. DOM ബബ്ലിംഗ്

റിയാക്ട് ഇവന്റുകൾ പോർട്ടലുകളിലൂടെ ശരിയായി ബബിൾ ചെയ്യുമെങ്കിലും, നേറ്റീവ് DOM ഇവന്റുകൾ അങ്ങനെയല്ല. നിങ്ങൾ ഒരു പോർട്ടലിനുള്ളിലെ എലമെന്റുകളിലേക്ക് നേരിട്ട് നേറ്റീവ് DOM ഇവന്റ് ലിസണറുകൾ അറ്റാച്ചുചെയ്യുകയാണെങ്കിൽ, അവ DOM ട്രീയിലൂടെ മാത്രമേ മുകളിലേക്ക് ബബിൾ ചെയ്യുകയുള്ളൂ, റിയാക്ട് കമ്പോണന്റ് ട്രീയിലൂടെയല്ല. സാധ്യമാകുമ്പോഴെല്ലാം റിയാക്ടിന്റെ സിന്തറ്റിക് ഇവന്റ് സിസ്റ്റം ഉപയോഗിക്കുക.

ഓവർലാപ്പ് ചെയ്യുന്ന പോർട്ടലുകൾ

നിങ്ങൾക്ക് ഒന്നിലധികം തരം ഓവർലേകൾ (മോഡലുകൾ, ടൂൾട്ടിപ്പുകൾ, നോട്ടിഫിക്കേഷനുകൾ) ഉണ്ടെങ്കിൽ, അവയെല്ലാം ബോഡിയിലേക്കോ ഒരു പൊതുവായ റൂട്ടിലേക്കോ റെൻഡർ ചെയ്യുകയാണെങ്കിൽ, അവയുടെ സ്റ്റാക്കിംഗ് ഓർഡർ കൈകാര്യം ചെയ്യുന്നത് സങ്കീർണ്ണമായേക്കാം. നിർദ്ദിഷ്ട z-index മൂല്യങ്ങൾ നൽകുകയോ അല്ലെങ്കിൽ ഒരു പോർട്ടൽ മാനേജ്മെന്റ് സിസ്റ്റം ഉപയോഗിക്കുകയോ ചെയ്യുന്നത് സഹായിക്കും.

പ്രകടന പരിഗണനകൾ

createPortal സ്വയം കാര്യക്ഷമമാണെങ്കിലും, പോർട്ടലുകൾക്കുള്ളിൽ സങ്കീർണ്ണമായ കമ്പോണന്റുകൾ റെൻഡർ ചെയ്യുന്നത് പ്രകടനത്തെ ബാധിച്ചേക്കാം. നിങ്ങളുടെ പോർട്ടൽ ഉള്ളടക്കം ഒപ്റ്റിമൈസ് ചെയ്തിട്ടുണ്ടെന്നും അനാവശ്യമായ റീ-റെൻഡറുകൾ ഒഴിവാക്കുന്നുണ്ടെന്നും ഉറപ്പാക്കുക.

`createPortal`-നുള്ള ബദലുകൾ

ഈ സാഹചര്യങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള സ്വാഭാവികമായ റിയാക്ട് രീതി createPortal ആണെങ്കിലും, നിങ്ങൾ കണ്ടുമുട്ടുകയോ പരിഗണിക്കുകയോ ചെയ്തേക്കാവുന്ന മറ്റ് സമീപനങ്ങൾ ശ്രദ്ധിക്കേണ്ടതാണ്:

• നേരിട്ടുള്ള DOM മാനിപ്പുലേഷൻ: നിങ്ങൾക്ക് document.createElement, appendChild എന്നിവ ഉപയോഗിച്ച് സ്വമേധയാ DOM എലമെന്റുകൾ ഉണ്ടാക്കാനും കൂട്ടിച്ചേർക്കാനും കഴിയും, എന്നാൽ ഇത് റിയാക്ടിന്റെ ഡിക്ലറേറ്റീവ് റെൻഡറിംഗും സ്റ്റേറ്റ് മാനേജ്മെന്റും മറികടക്കുന്നു, ഇത് പരിപാലിക്കാൻ ബുദ്ധിമുട്ടാക്കുന്നു.
• ഹയർ-ഓർഡർ കമ്പോണന്റുകൾ (HOCs) അല്ലെങ്കിൽ റെൻഡർ പ്രോപ്പുകൾ: ഈ പാറ്റേണുകൾക്ക് പോർട്ടൽ റെൻഡറിംഗിന്റെ ലോജിക് മറച്ചുവെക്കാൻ കഴിയും, എന്നാൽ createPortal തന്നെയാണ് അടിസ്ഥാനപരമായ സംവിധാനം.
• കമ്പോണന്റ് ലൈബ്രറികൾ: പല UI കമ്പോണന്റ് ലൈബ്രറികളും (ഉദാഹരണത്തിന്, Material-UI, Ant Design, Chakra UI) മുൻകൂട്ടി നിർമ്മിച്ച മോഡൽ, ടൂൾട്ടിപ്പ്, ഡ്രോപ്പ്ഡൗൺ കമ്പോണന്റുകൾ നൽകുന്നു. അവ createPortal-ന്റെ ഉപയോഗം മറച്ചുവെക്കുകയും കൂടുതൽ സൗകര്യപ്രദമായ ഡെവലപ്പർ അനുഭവം നൽകുകയും ചെയ്യുന്നു. എന്നിരുന്നാലും, ഈ കമ്പോണന്റുകൾ കസ്റ്റമൈസ് ചെയ്യുന്നതിനോ അല്ലെങ്കിൽ നിങ്ങളുടേതായവ നിർമ്മിക്കുന്നതിനോ createPortal മനസ്സിലാക്കുന്നത് നിർണായകമാണ്.

ഉപസംഹാരം

റിയാക്ടിൽ സങ്കീർണ്ണമായ യൂസർ ഇന്റർഫേസുകൾ നിർമ്മിക്കുന്നതിനുള്ള ശക്തവും അത്യാവശ്യവുമായ ഒരു ഫീച്ചറാണ് React.createPortal. കമ്പോണന്റുകളെ അവയുടെ റിയാക്ട് ട്രീ ഹയറാർക്കിക്ക് പുറത്തുള്ള DOM നോഡുകളിലേക്ക് റെൻഡർ ചെയ്യാൻ അനുവദിക്കുന്നതിലൂടെ, CSS z-index, സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റുകൾ, എലമെന്റ് ഓവർഫ്ലോ എന്നിവയുമായി ബന്ധപ്പെട്ട പൊതുവായ പ്രശ്നങ്ങൾ ഇത് ഫലപ്രദമായി പരിഹരിക്കുന്നു.

നിങ്ങൾ ഉപയോക്തൃ സ്ഥിരീകരണത്തിനായി സങ്കീർണ്ണമായ മോഡൽ ഡയലോഗുകൾ നിർമ്മിക്കുകയാണെങ്കിലും, സന്ദർഭോചിതമായ വിവരങ്ങൾക്കായി സൂക്ഷ്മമായ ടൂൾട്ടിപ്പുകൾ നിർമ്മിക്കുകയാണെങ്കിലും, അല്ലെങ്കിൽ ആഗോളമായി ദൃശ്യമാകുന്ന നോട്ടിഫിക്കേഷൻ ബാനറുകൾ നിർമ്മിക്കുകയാണെങ്കിലും, createPortal ആവശ്യമായ വഴക്കവും നിയന്ത്രണവും നൽകുന്നു. നിങ്ങളുടെ പോർട്ടൽ DOM നോഡുകൾ കൈകാര്യം ചെയ്യാനും, ഇവന്റുകൾ ശരിയായി കൈകാര്യം ചെയ്യാനും, പ്രവേശനക്ഷമതയ്ക്കും പ്രകടനത്തിനും മുൻഗണന നൽകാനും ഓർമ്മിക്കുക. ഇത് വൈവിധ്യമാർന്ന സാങ്കേതിക പശ്ചാത്തലങ്ങളും ആവശ്യങ്ങളുമുള്ള ഒരു ആഗോള പ്രേക്ഷകർക്ക് അനുയോജ്യമായ, ശക്തവും ഉപയോക്തൃ-സൗഹൃദവുമായ ഒരു ആപ്ലിക്കേഷൻ ഉണ്ടാക്കാൻ സഹായിക്കും.

createPortal-ൽ പ്രാവീണ്യം നേടുന്നത് നിങ്ങളുടെ റിയാക്ട് ഡെവലപ്‌മെന്റ് കഴിവുകളെ തീർച്ചയായും ഉയർത്തും, ആധുനിക വെബ് ആപ്ലിക്കേഷനുകളുടെ വർദ്ധിച്ചുവരുന്ന സങ്കീർണ്ണമായ ലോകത്ത് വേറിട്ടുനിൽക്കുന്ന കൂടുതൽ മിഴിവുറ്റതും പ്രൊഫഷണലുമായ UI-കൾ നിർമ്മിക്കാൻ നിങ്ങളെ പ്രാപ്തരാക്കും.